<template>
  <div>
    <template>
      <el-table :data="tableData">
        <el-table-column
          v-if="showOne"
          align="center"
          label="序号"
          type="index"
          width="50"
        >
        </el-table-column>
        <!-- 使用colunms进行渲染表头  格式:[{label:''},{label:''}，{label:''}]    ，propdata 动态化获取表头    格式['prop1'，'prop2'，'prop3'] -->
        <el-table-column
          v-for="(column, index) in columns"
          :label="column.label"
          :prop="column.prop"
          :key="index"
          align="center"
        >
          <template v-if="column.children != null">
            <el-table-column
              v-for="(ite, ind) in column.children"
              :key="ind"
              :label="ite.label"
              :prop="ite.prop"
              align="center"
            ></el-table-column>
          </template>
        </el-table-column>
        <el-table-column align="center" v-if="show02" label="操作">
          <template slot-scope="scope">
            <div>
              <el-button
                size="mini"
                type="text"
                @click="handleAction(scope.row)"
                >查看详情</el-button
              >
            </div>
          </template>
        </el-table-column>
        <!-- showcompore -->
        <el-table-column align="center" v-if="showcompore" label="操作">
          <template slot-scope="scope">
            <div>
              <el-button
                size="mini"
                type="text"
                @click="handleRowClick(scope.row)"
                >查看详情</el-button
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" v-if="showProduct" label="操作">
          <template slot-scope="scope">
            <div>
              <!-- <el-button size="mini" type="text">启用</el-button> -->
              <el-switch
                v-model="scope.row.isOpen"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="handleRowClick(scope.row)"
              >
              </el-switch>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      required: true,
    },
    propData: [],
    tableData: {
      type: Array,
      required: true,
    },
    showOne: {
      type: Boolean,
    },
    show02: {
      type: Boolean,
    },
    params: {
      type: Object,
    },
    showcompore: {
      type: Boolean,
    },
    strFack: {},
    showProduct: { type: Boolean },
  },
  watch: {
    strFack(newValue, oldValue) {
      console.log(newValue);
    },
  },
  methods: {
    handleRowClick(row) {
      console.log(this.strFack);
      row.type = this.strFack;
      this.$emit("row-click", row);
    },
    handleAction(row) {
      // 处理操作按钮点击事件
      this.$router.push({
        path: "/calculate/calculatePerformance",
        query: {
          pandianCode: row.pandianCode,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
